// 导入第三方库
import React, { memo, useEffect, useRef, useCallback, useState } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'
// 导入功能性的东西
import { getTopBannerAction } from '../../store/actionCreators'
// 导入组件
import { Carousel } from 'antd';
import {
  BannerWrapper,
  BannerLeft,
  BannerRight,
  BannerControl
} from './style'
const MSNTopBanner = memo(() => {
  // 1、放内部的state
  const [currentIndex,setCurrentIndex] = useState(0)

  // 2、放与redux相关的东西
  /* 组件与redux关联用途：获取数据和进行操作
  也可以将数据进行解构出来，默认返回的对象是进行===的比较，而函数返回的对象都是不全等于的，
  所以不关联的数据改变也会重新渲染，所以需要改变===的比较方式,将===的比较方式改为浅层比较
  使用shallowEqual */
  const {topBanners} = useSelector(state => ({
    // topBanners: state.recommend.topBanners
    topBanners: state.get("recommend").get("topBanners")//他等价于state.getIn(["recommend","topBanners"])
  }), shallowEqual)
  const dispatch = useDispatch();

  // 3、其他的hooks
  const bannerRef = useRef();
  useEffect(() => {
      // 发送网络请求
    dispatch(getTopBannerAction())
  },[dispatch])

  const bannerChange = useCallback((from, to) => {
    setCurrentIndex(to)
  },[setCurrentIndex])

  // 4、放其他逻辑
  const bgImage = topBanners[currentIndex] && topBanners[currentIndex].imageUrl
  return (
    <BannerWrapper bgImage={bgImage+'?imageView&blur=40x20'}>
      <div className='banner wrap-v2'>
        <BannerLeft>
        <Carousel effect="fade" ref={bannerRef} beforeChange={bannerChange}>
          {
            topBanners.map((item, index) => {
              return (
                <div className='banner-item' key={item.encodeId}>
                  <img className='image' src={item.imageUrl} alt={item.typeTitle} />
                </div>
              )
            })
          }
        </Carousel>
        </BannerLeft>
        <BannerRight></BannerRight>
        <BannerControl>
          <button className='btn left' onClick={e => bannerRef.current.prev()}></button>
          <button className='btn right' onClick={e => bannerRef.current.next()}></button>
        </BannerControl>
      </div>
    </BannerWrapper>
  )
})

export default MSNTopBanner